import './index.css'
import * as THREE from 'three'
import {
    GLTFLoader
} from 'three/examples/jsm/Addons.js'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/Addons.js';

/**
 * Size
 */
const Size = {
    width: window.innerWidth,
    height: window.innerHeight
}


/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, Size.width / Size.height, 0.1, 100)
camera.position.set(10, 15, 10)

/**
 * Scene
 */
const scene = new THREE.Scene()

/**
 * Light
 */
const ambientLight = new THREE.AmbientLight(new THREE.Color('#ffffff'), 3)
scene.add(ambientLight)

// const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
// directionalLight.position.set(1, 1, 1);
// scene.add(directionalLight);

// const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.8);
// directionalLight2.position.set(-1, -1, -1);
// scene.add(directionalLight2);

// const directionalLight3 = new THREE.DirectionalLight(0xffffff, 0.8);
// directionalLight3.position.set(-1, 1, -1);
// scene.add(directionalLight3);

// const directionalLight4 = new THREE.DirectionalLight(0xffffff, 0.8);
// directionalLight4.position.set(1, -1, 1);
// scene.add(directionalLight4);


// const spotLight = new THREE.SpotLight(0xffffff, 3, 15, Math.PI * 0.1, 0.25, 1)
// spotLight.position.set(0, 10, 0)
// scene.add(spotLight)
// // const spotLightHelper = new THREE.SpotLightHelper(spotLight)
// scene.add(spotLightHelper)




/**
 * Model
 */
const loader = new GLTFLoader();

loader.load('../assets/model/su7/scene.gltf',
    function (gltf) {
        console.log('success')
        gltf.scene.scale.set(5, 5, 5)
        gltf.scene.castShadow = true
        scene.add(gltf.scene)
        updateAllMaterials()
    },
    function (progress) {
        console.log('progress')
    },
    function (error) {
        console.log('error')
        console.log(error)
    },
)


/**
 * 优化材质
 */
const updateAllMaterials = () => {
    scene.traverse((child) => {
        if (child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial) {
            console.log(child)
            //遍历模型中的 Mesh，并添加材质的环境贴图，将环境贴图强度设置为 2.5
            child.material.envMap = environmentMap
            child.material.envMapIntensity = 2.5
            // 开启阴影
            child.castShadow = true
            child.receiveShadow = true
        }
    })
}


/**
 * Renderer
 */
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true,
})
renderer.setSize(Size.width, Size.height)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor(0x000000, 1)
// 物理上正确的光照模式
renderer.physicallyCorrectLights = true
// outputEncoding 渲染器的输出编码
renderer.outputEncoding = THREE.sRGBEncoding
//toneMappingExposure 色调映射的曝光级别
renderer.toneMappingExposure = 2.5
// shadow
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap


/**
 * Environment map
 */
// const cubeTextureLoader = new THREE.CubeTextureLoader()
// const environmentMap = cubeTextureLoader.load([
//     '../assets/envMap/0/px.jpg',
//     '../assets/envMap/0/nx.jpg',
//     '../assets/envMap/0/py.jpg',
//     '../assets/envMap/0/ny.jpg',
//     '../assets/envMap/0/pz.jpg',
//     '../assets/envMap/0/nz.jpg',
// ])
// environmentMap.encoding = THREE.sRGBEncoding
// scene.background = environmentMap


/**
 * HDR
 */
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync('../assets/HDR/t_env_light.hdr')
  .then((texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping; // 关键映射设置
    scene.environment = texture; // 设置为环境贴图
    scene.background = texture;   // 可选：作为背景
  })
  .catch((error) => {
    console.error('HDR加载失败:', error);
  });


/**
 * OrbitControls
 */
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true


/**
 * Update
 */
const tick = () => {
    controls.update();
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()